<template>
  <div :id="props.question.questionId" class="question-container">
    <!-- 题目 -->
    <div class="question-title">
      <span>{{ index }}.</span>
      <span>
        【<common-enum-view :enum-name="'QuestionType'" :enum-value="props.question.questionType" />】
        <paper-content :content="props.question.questionTitle" />
        <span>（{{ props.question.questionScore }}分）</span>
      </span>
    </div>
    <!-- 选项 -->
    <div class="question-option">
      <div v-if="props.question.questionType === 1">
        <!-- 单选题 -->
        <div class="question-option-item">
          <div v-for="(item, index) in props.question.options" :key="index">
            <div class="item">
              <img v-if="item.optionStatus === 1" src="~/assets/svg/paper/circle_correct.svg" />
              <img v-if="item.optionStatus === 2" src="~/assets/svg/paper/circle_wrong.svg" />
              <img v-if="item.optionStatus === 3" src="~/assets/svg/paper/circle_default.svg" />
              <span>&nbsp;{{ changeNumToEn(index) }}、</span>
              <paper-content :content="item.optionContent" />
            </div>
          </div>
        </div>
      </div>
      <div v-if="props.question.questionType === 2">
        <!-- 多选题 -->
        <div class="question-option-item">
          <div v-for="(item, index) in props.question.options" :key="index">
            <div class="item">
              <img v-if="item.optionStatus === 1" src="~/assets/svg/paper/square_correct.svg" />
              <img v-if="item.optionStatus === 2" src="~/assets/svg/paper/square_wrong.svg" />
              <img v-if="item.optionStatus === 3" src="~/assets/svg/paper/square_default.svg" />
              <span>&nbsp;{{ changeNumToEn(index) }}、</span>
              <paper-content :content="item.optionContent" />
            </div>
          </div>
        </div>
      </div>
      <div v-if="props.question.questionType === 3">
        <!-- 判断题 -->
        <div class="question-option-item">
          <div v-for="(item, index) in props.question.options" :key="index">
            <div class="item">
              <img v-if="item.optionStatus === 1" src="~/assets/svg/paper/circle_correct.svg" />
              <img v-if="item.optionStatus === 2" src="~/assets/svg/paper/circle_wrong.svg" />
              <img v-if="item.optionStatus === 3" src="~/assets/svg/paper/circle_default.svg" />
              &nbsp;<paper-content :content="item.optionContent" />
            </div>
          </div>
        </div>
      </div>

      <!-- 填空题 -->
      <div v-if="props.question.questionType === 4">
        <div v-for="(item, index) in props.question.optionCount" :key="index">
          <div class="item4">
            空{{ item }}：<el-input v-model="props.question.userAnswer4[index]" disabled />
            <span v-if="props.question.questionAnswer">
              <span v-if="props.question.userAnswer4[index] !== props.question.questionAnswer4[index]">
                <img src="~/assets/svg/paper/circle_wrong.svg" alt="" /> 答案：{{ props.question.questionAnswer4[index] }}
              </span>
              <span v-else><img src="~/assets/svg/paper/circle_correct.svg" alt="" /></span>
            </span>
          </div>
        </div>
      </div>
      <!-- 简答题 -->
      <div v-if="props.question.questionType === 5"></div>
    </div>
    <div class="question-result text-color">
      <!-- 答案 -->
      <div class="question-answer">
        <!-- 单选题 -->
        <div v-if="props.question.questionType === 1">
          <div v-if="props.question.questionAnswer">
            正确答案：
            <span v-for="(item, index) in props.question.options" :key="index">
              <span v-if="props.question.questionAnswer === item.optionContent" class="symbol">{{ changeNumToEn(index) }}</span>
            </span>
          </div>
          <div>
            您的答案：
            <span v-for="(item, index) in props.question.options" :key="index">
              <span v-if="props.question.userAnswer === item.optionContent" class="symbol">{{ changeNumToEn(index) }}</span>
            </span>
          </div>
        </div>
        <!-- 多选题 -->
        <div v-if="props.question.questionType === 2">
          <div v-if="props.question.questionAnswer">
            正确答案：
            <span v-for="(item, index) in props.question.options" :key="index">
              <span v-if="props.question.questionAnswer2 && props.question.questionAnswer2.indexOf(item.optionContent) > -1" class="symbol">{{ changeNumToEn(index) }}&nbsp;</span>
            </span>
          </div>
          <div>
            您的答案：
            <span v-for="(item, index) in props.question.options" :key="index">
              <span v-if="props.question.userAnswer2 && props.question.userAnswer2.indexOf(item.optionContent) > -1" class="symbol">{{ changeNumToEn(index) }}&nbsp;</span>
            </span>
          </div>
        </div>
        <!-- 判断题 -->
        <div v-if="props.question.questionType === 3">
          <div v-if="props.question.questionAnswer">正确答案：{{ props.question.questionAnswer }}</div>
          <div>您的答案：{{ props.question.userAnswer }}</div>
        </div>
        <!-- 填空题 -->
        <div v-if="props.question.questionType === 4"></div>
        <!-- 简答题 -->
        <div v-if="props.question.questionType === 5">
          <div v-if="props.question.questionAnswer">正确答案：<paper-content :content="props.question.questionAnswer" /></div>
          <div>您的答案： <paper-content :content="props.question.userAnswer" /></div>
        </div>
        <div>
          <span v-if="props.question.questionAnswer">最终得分：{{ props.question.userScore }} 分</span>
          <span> (本题分数 {{ props.question.questionScore }} 分)</span>
        </div>
      </div>
      <!-- 解析 -->
      <div v-if="props.question.questionAnalysis" class="question-Analysis">解析：<paper-content :content="props.question.questionAnalysis" /></div>
    </div>
  </div>
</template>

<script setup>
  import { changeNumToEn } from '~/utils/base'

  const props = defineProps({
    question: {
      // 题目
      type: Object,
      default: () => {}
    },
    index: {
      // 题号
      type: Number,
      default: 0
    }
  })

  onMounted(() => {
    // 处理题目答案
    if (props.question.questionType === 1) {
      // 单选题
      props.question.options.forEach((item, index) => {
        item.optionStatus = 3
        if (props.question.questionAnswer === item.optionContent) {
          item.optionStatus = 1
        }
        if (props.question.userAnswerStatus === 1) {
          // 答错特别标记
          if (props.question.userAnswer === item.optionContent) {
            item.optionStatus = 2
          }
        }
      })
    }
    if (props.question.questionType === 2) {
      // 多选题
      props.question.options.forEach((item, index) => {
        item.optionStatus = 3
        if (props.question.questionAnswer2.indexOf(item.optionContent) > -1) {
          item.optionStatus = 1
        }
        if (props.question.userAnswerStatus === 1) {
          // 答错特别标记
          if (props.question.userAnswer2.indexOf(item.optionContent) > -1) {
            item.optionStatus = 2
          }
        }
      })
    }
    if (props.question.questionType === 3) {
      // 判断题
      props.question.options.forEach((item, index) => {
        item.optionStatus = 3
        if (props.question.questionAnswer === item.optionContent) {
          item.optionStatus = 1
        }
        if (props.question.userAnswerStatus === 1) {
          // 答错特别标记
          if (props.question.userAnswer === item.optionContent) {
            item.optionStatus = 2
          }
        }
      })
    }
  })
</script>
<style lang="scss" scoped>
  .question-container {
    flex: 1;
    margin-bottom: 10px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    font-size: 16px;
    line-height: 50px;
    .question-title {
      display: flex;
      line-height: 25px;
    }
    .question-option {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      .question-option-item {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        .item {
          display: flex;
          align-items: center;
        }
      }
    }
    .item4 {
      :deep(.el-input) {
        width: 250px;
        margin: 0 10px;
      }
    }
    :deep(p) {
      margin: 0;
      display: inline;
    }
  }

  .question-result {
    background-color: #f5f5f4;
    margin-top: 20px;
    padding: 10px 20px;
    border-radius: 5px;
    line-height: 30px;
  }
</style>
